import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:sleep/comp/heat.dart';
import 'package:sleep/help_style.dart';
import 'package:flutter/material.dart';
import 'package:sleep/provider/wave_deatil_provider/pluse_detail_provider.dart';

const kIconBgColors = [
  Color(0xff34548F),
  Color(0xff34548F),
];

const iconColors = [
  Color(0xff652639),
  Color(0xff1F463E),
  Color(0xff34548F),
  Color(0xff725F40),
];

class HeartDetail extends ConsumerWidget {
  const HeartDetail({Key? key}) : super(key: key);

  Widget messageItem(
      String title, String content, String unit, IconData icon, Color bgColor,
      {Widget? iconChild}) {
    return Padding(
      padding:
          const EdgeInsets.only(left: 8.0, top: 12.0, right: 16, bottom: 8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          RichText(
              text: TextSpan(
            text: content + unit,
            style:
                HelpStyle.titleStyle3.copyWith(color: HelpStyle.primarycolor),
            children: [
              const TextSpan(text: "\n"),
              TextSpan(text: title, style: HelpStyle.smallStyle),
            ],
          )),
          const Expanded(child: SizedBox()),
          Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
                color: bgColor, borderRadius: BorderRadius.circular(16)),
            child: iconChild ??
                Icon(
                  icon,
                  color: Color(0xff1F463E),
                ),
          ),
        ],
      ),
    );
  }

  Widget bpCard(String title, IconData icon, String data, String unit,
      {Widget? iconChild}) {
    return Container(
      decoration: HelpStyle.decoration,
      padding: EdgeInsets.fromLTRB(HelpStyle.cellMargin, HelpStyle.margin,
          HelpStyle.cellMargin, HelpStyle.margin),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title, style: HelpStyle.titleStyle3),
              iconChild ??
                  Icon(
                    icon,
                    color: HelpStyle.primarycolor,
                  )
            ],
          ),
          SizedBox(height: HelpStyle.margin),
          Row(
            children: [
              Text(
                data,
                style: HelpStyle.titleStyle
                    .copyWith(color: HelpStyle.primarycolor),
              ),
              SizedBox(width: HelpStyle.cellMargin),
              Text(
                unit,
                style: HelpStyle.contextStyle,
              )
            ],
          )
        ],
      ),
    );
  }

  Widget rowIem(_ContentModel right, _ContentModel left) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
            child: messageItem(right.title, right.message, right.unit,
                right.icon, right.bgColor!,
                iconChild: right.iconChild)),
        LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          return Container(
            color: HelpStyle.lineColor,
            width: 0.5,
            height: 60,
          );
        }),
        Expanded(
            child: messageItem(
                left.title, left.message, left.unit, left.icon, left.bgColor!))
      ],
    );
  }

  @override
  Widget build(BuildContext context, ref) {
    final pulse = ref.watch(pulseDetailProvider);
    final hv = _ContentModel('BPM', pulse.bpm, '', Icons.show_chart_outlined,
        bgColor: kIconBgColors[0], iconChild: HeartbeatAnimation());
    final hrv = _ContentModel(
      'HRV',
      pulse.hrv,
      '',
      Icons.show_chart_outlined,
      bgColor: kIconBgColors[1],
    );

    return Container(
      padding: const EdgeInsets.all(12),
      decoration: HelpStyle.decoration,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          rowIem(hv, hrv),
        ],
      ),
    );
  }
}

class _ContentModel {
  final String title;
  final String message;
  final String unit;
  final IconData icon;
  final Widget? iconChild;
  final Color? bgColor;

  _ContentModel(this.title, this.message, this.unit, this.icon,
      {this.iconChild, this.bgColor});
}
